<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #rectangle{ width: 60vw; height: 60vh; margin: 20vh auto;background: rgb(155, 238, 224); }
    </style>
</head>
<body>
    <div id="rectangle">通过设置元素的width,height和margin的视窗(Viewport)单位，你可以不使用任何其它技巧来设置居中。
            
            这里有一个高度为60vh 上下外边距为20vh的矩形，它们加起来是100vh(60+2*20)，使它即便调整窗口大小也可以始终居中。
            
            著作权归作者所有。
            商业转载请联系作者获得授权,非商业转载请注明出处。
            原文: https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html © w3cplus.com</div>
</body>
</html>